<template>
	<view class="function">
		<view class="function-view functionflex" @click="erasureClick()">
			<image src="../../static/questions/laji.png"></image>
			<view>擦除</view>
		</view>
		<view class="function-view functionflex" @click="revocationClick()">
			<image src="../../static/questions/chehui.png"></image>
			<view>撤回</view>
		</view>
		<view class="function-view functionflex" @click="bijiClick()">
			<image v-if="bijishow  == 0" src="../../static/questions/biji.png"></image>
			<image v-if="bijishow  == 1" src="../../static/questions/biji1.png"></image>
			<view>笔记</view>
		</view>
		
		
		<view class="function-view functionflex" @click="hintClick()">
			<text>{{hintnumber}}</text>
			<image src="../../static/questions/tishi.png"></image>
			<view>提示</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		
		props: ['index','index1','tskeys','tshintnumber'],
		watch:{
			index(e){
				this.xindex = e;
			},
			index1(e){
				this.xindex1 = e;
			},
			tshintnumber(e){
				console.log(e);
				this.hintnumber  =e;
			}
		},
		data() {
			return {
				xindex : null,
				xindex1: null,
				hintnumber : 0,
				bijishow   : 0,
				sharehide  : 1,
				
			}
		},
		created() {
			this.hintnumber  = this.tshintnumber;		
		},
		methods : {
			bijiClick(){
				this.bijishow  =   this.bijishow  == 0 ? 1 : 0;
				this.$emit('bijiChange',this.bijishow);
			},
			revocationClick(){
				this.$emit('revocationChange',1);
			},
			hintClick(){  //提示
				let that = this;
				console.log(this.xindex);				
				if(that.hintnumber <=0){
					uni.showModal({
					        title: '提示',
					        content: '提示次数不足！可观看视频增加提示次数？',
					        success: function(res) {
					        if (res.confirm) {
					         	that.$emit('advertisingChange',1);
					        } 
					       
					    }
					})
					return false;
					
				}
				if(this.xindex  != null ){
					uni.showModal({
						title: '提示',
						content: '确定要查看该宫格的答案吗？',
						success: function (res) {
							if (res.confirm) {
								that.hintnumber --;
								uni.setStorageSync(that.tskeys,that.hintnumber);
								that.$emit('hintChange',1);
							}
						},
					})
				}else{
					uni.showToast({
						title: '请选择宫格',
						icon: "none" ,
					});return false;
				}
				
			},
			erasureClick(){   //擦除
				let that = this;
				if(!this.xindex  && !this.xindex1){
					uni.showToast({
						title: '请选择宫格',
						icon: "none" ,
					});return false;
				}
				uni.showModal({
					title: '提示',
					content: '确定要擦除该宫格的答案吗？',
					success: function (res) {
						if (res.confirm) {
							that.$emit('erasureChange',1);
						}
					},
				})
			}
		}
	}
</script>

<style>
	.function {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 160rpx;
	}
	.function-view  {
		width: 120rpx;
		text-align: center;
		margin-left: 16rpx;
		margin-right: 16rpx;
		position: relative;
	}
	.function-view > image  {
		width: 80rpx;
		height: 80rpx;
		display: block;
		margin: auto;
	}
	.function-view > view {
		padding-top: 10rpx;
	}
	.function-view >text  {
		position: absolute;
		margin-left: 18rpx;
		margin-top: -17rpx;
		background: #5c85b7;
		border-radius: 16rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 39rpx;
	
	}
	.functionflex {
		margin-left: 34rpx;
		margin-right: 34rpx;
	}
</style>